<script lang="ts" setup>
import { ref, reactive, onMounted, unref } from 'vue'
import { ApproverConfig, Approver } from '@/types/modules/approver-config'

import * as api from '@/api/modules/approver-config'
import { message } from 'ant-design-vue'
import { BasicTableColumn } from '@/types'
import { useModal } from '@/hooks/system/useModal'
import useTableList from '@/hooks/system/useTableList'
import useDrawer from '@/hooks/system/useDrawer'

import panel from './panel.vue'
import { useHttp } from '@/hooks/web/useHttp'
import { useSettingsStoreWithOut } from '@/store/modules/layout'


onMounted(() => {
   getDataList() 
})

const tableData = ref<ApproverConfig[]>()

const getDataList = async () => {
  //接口
  const result = await api.getApproverConfigList()
  if (result) {    
    tableData.value = result.data
  }
}

const {
  visible: relateVisible,
  currentItem: relateCurrentItem,
  onShow: onShowRelate
} = useDrawer()

const relateComps = {
}

const relateAttrName = ref<string>('')
const relateTitle = ref<string>('')
const onCheckRelate = (attrName: string, title: string, relate: any) => {
  relateAttrName.value = attrName
  relateTitle.value = title
  onShowRelate(relate)
}

const panelFormRef = ref()
const {
  bindValue: panelBindValue,
  register: panelRegister,
  currentItem: panelCurrentItem,
  onShow: onShowPanel,
  onClose: onClosePanel,
  getInnerForm: getPanelForm
} = useModal<ApproverConfig>()
const handleEditResult = useHttp(
  '修改失败',
  '修改成功'
)

const settingsStore = useSettingsStoreWithOut()

const onFinishEdit = async function () {
  const result = await panelFormRef.value.handleOk();

  if (result && result.value) {    
    const res = await api.updateApproverConfig(result.value)

    handleEditResult(res, () => {
      getDataList()
    })
  }
}
</script>

<template>
  <div class="page-wrapper">    
    <a-card class="table-card">      
      <panel        
        title="审批流程设置" 
        :item-data="tableData"
        @ok="onFinishEdit"   
        @refresh="getDataList"
        @check="onCheckRelate"
        ref="panelFormRef" >
      </panel>
    </a-card>      
  </div>
</template>

<style lang="less" scoped>
.page-wrapper {
  padding: 20px;

  .table-card {
    margin-top: 20px;
  }
}

.drawer-footer {
  text-align: right;

  button {
    margin-left: 8px;
  }
}
</style>
